import React from 'react';
import styles from './style.css'
// import { getHistory } from "../../util/uitls";
import pageRedux from '../pageRedux'
import MyLayout from '../../component/MyLayout';
import MyIconImage from '../../component/MyIconImage';
import Bottom from '../../component/bottom';
import FriendList from './friendList';
import FriendListItem from './friendListItem';
import {GET_STRAGERS, put_positio_user} from "../../api/user";
import {getPosition} from "../../util/baidumap";
import MyAlert1 from "../../util/alert";
import {getHistory, mergeArray} from "../../util/uitls";
import {deleteTheSameOneArray, MyMap} from "../../util/lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
import {getLocal} from "../../util/local";

class Home extends React.Component {
    constructor(props) {
        super()
        this.state = {
            hasMore: true,
            user: props.getStore("app.user"),
            offset: props.getStore("app.strangers_offset"),
            limit: props.getStore("app.strangers_limit")
        }
    }

    componentWillMount() {
        var user = this.props.getStore("app.user")
        if (!user) {
            MyAlert1.fail("请登陆")
            location.href = "/login"
            return false
        }
        if (!user.latitude) {
            MyAlert1.fail("请定位")
            return false
        }
    }

    async componentDidMount() {
        var self = this
        var user = this.props.getStore("app.user")
        if (!user.latitude) {
            await  this.setPosition()
            var result1 = await put_positio_user({
                ...user
            })
        }

        setTimeout(() => {
            self.getStrangers()
        }, 300)

    }

    async getStrangers() {
        var user = this.state.user
        var strangers = this.props.getStore("app.strangers")
        if (strangers && strangers.length >= 50) {
            // MyAlert1.fail("陌生人数已超50")
            this.setState({hasMore: false})
            console.info("陌生人数已超50")
            return false
        }

        var offset = this.state.offset;
        var limit = this.state.limit
        var gender = this.props.getStore("app.filter_generID")
        var distance = getLocal("app.filter_range") && getLocal("app.filter_range")[0]
        var result2 = await  GET_STRAGERS({
            ...user, offset, limit, gender,
            distance,
        })
        // var l = deleteTheSameOneArray(strangers, result2.data, "id")
        var l = strangers.concat(result2.data)
        this.props.setStore("app.strangers", l)
        this.props.setStore("app.strangers_limit", limit)
        this.props.setStore("app.strangers_offset", parseInt(offset + limit))

        this.setState({
            limit,
            offset: parseInt(offset + limit)
        })

    }

    next() {
        this.getStrangers()
    }

    async setPosition() {
        MyAlert1.loading()
        var result1 = await  getPosition()
        MyAlert1.clear()
        var user = this.props.getStore("app.user")
        await this.props.setStore("app.user", {...user, ...result1})

    }

    render() {
        var self = this
        var user = this.state.user
        var strangers = this.props.getStore("app.strangers")
        return <div className={styles.home}>
            <header className={styles.header}>
                <div className={styles.left} onClick={this.setPosition.bind(this)}>
                    <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/%E5%AE%9A%E4%BD%8D.png"/>
                    {!user.latitude && <span>定位失败,请重新点击确定</span>}
                    {user.latitude && <span>定位成功</span>}
                </div>
                <div className={styles.center}>金色梦乡</div>
                <div className={styles.right}>

                    <MyIconImage image="http://pj5qx5lsj.bkt.clouddn.com/%E8%BF%87%E6%BB%A4.png" onClick={() => {
                        getHistory().push("/home-filter")
                    }}/>
                </div>
            </header>


            <div className={styles.center}>
                {
                    strangers && <InfiniteScroll
                        dataLength={strangers.length} //This is important field to render the next data
                        next={this.next.bind(this)}
                        hasMore={this.state.hasMore}
                        loader={<h4 style={{textAlign: 'center'}}>加载ing...</h4>}
                        endMessage={
                            <p style={{textAlign: 'center'}}>
                                {
                                    strangers.length != 0 && <b>人数已经超过50个</b>
                                }
                            </p>
                        }
                    >
                        <FriendList>
                            {
                                MyMap(strangers, (item, index) => {
                                    if (index <= 50) {
                                        return <FriendListItem user={{...item, index}} {...self.props}></FriendListItem>
                                    }
                                })
                            }
                        </FriendList>
                    </InfiniteScroll>
                }


            </div>

            <Bottom/>

        </div>
    }
}

export default pageRedux(Home)